Events


JavaScript events are actions or occurrences that happen in the browser. They can be triggered by user interactions or by the browser itself.

1. Common Events

Here are some common events in JavaScript:

2. Adding Event Listeners

Event listeners can be added to elements to execute code when an event occurs.

<button id="myButton">Click Me!</button> 
<script>
document.getElementById("myButton").addEventListener("click", function() {
alert("Button was clicked!");
});
</script>

3. Removing Event Listeners

Event listeners can also be removed from elements.

<button id="myButton">Click Me!</button>
        
<script>
function myFunction() { alert("Button was clicked!"); }
document.getElementById("myButton").addEventListener("click", myFunction);
</script>
   

4. Event Object

The event object contains information about the event that occurred.

document.getElementById("myButton").addEventListener("click", function(event) {
    console.log("Event type: " + event.type);
    console.log("Element ID: " + event.target.id);
});

5. Event Propagation

Event propagation determines the order in which events are received by the target element and its ancestors.

document.getElementById("parent").addEventListener("click", function() {
    alert("Parent clicked!");
}, true); // Use true for capturing phase

document.getElementById("child").addEventListener("click", function() {
    alert("Child clicked!");
}, false); // Use false for bubbling phase

6. Preventing Default Actions

The preventDefault() method cancels the event if it is cancelable, meaning that the default action that belongs to the event will not occur.

document.getElementById("myLink").addEventListener("click", function(event) {
    event.preventDefault();
    alert("Default action prevented!");
});

7. Stopping Event Propagation

The stopPropagation() method prevents further propagation of the current event in the capturing and bubbling phases.

document.getElementById("child").addEventListener("click", function(event) {
    event.stopPropagation();
    alert("Propagation stopped!");
});